/**
 * 书籍加载
 * 从JSON文件加载书籍目录
 */

import "./App.css";
import { Component } from 'react';

class BookLoader extends Component{
  constructor(props){
    super(props);

    this.bookName = "Book";
    
    this.state={
      selected      : -1,           // 选中算法
      algorithmImp  : undefined,    // 算法实现
      algorithmList : []            // 算法列表
    }

    this.home             = this.home.bind(this);
    this.cancelArrowEvent = this.cancelArrowEvent.bind(this);
    this.handleKeyDown    = this.handleKeyDown.bind(this);
    this.handleMenuClick  = this.handleMenuClick.bind(this);

    this.init            = this.init.bind(this);
    this.setupAlgorithm  = this.setupAlgorithm.bind(this);
  }

  componentDidMount(){
    document.title = this.bookName;

    this.loadBookFromJSON();

    document.onkeydown=this.cancelArrowEvent;
    window.addEventListener('keydown', this.handleKeyDown, false);
  }

  loadBookFromJSON(){
    if(this.algorithms){
      const selected = 5;
      this.setState({
        selected      : selected,
        algorithmList : this.algorithms
      })
  
      this.init(this.algorithms[selected].id);
    }
  }

  componentWillUnmount(){
    window.removeEventListener('keydown', this.handleKeyDown, false);
  }

  
  cancelArrowEvent(event){
    if(event.key === 'ArrowDown' || event.key === 'ArrowUp'){
      return false;
    }
  }

  handleKeyDown(event){
    if(event.key === 'ArrowDown'){
      let selected = this.state.selected;
      if(selected < this.state.algorithmList.length - 1){
        selected += 1;
      
        this.init(this.state.algorithmList[selected].id);
        this.setState({
          selected : selected
        })
      }
    }
    else if(event.key === 'ArrowUp'){
      let selected = this.state.selected;
      if(selected > 0){
        selected -= 1;
        
        this.init(this.state.algorithmList[selected].id);
        this.setState({
          selected : selected
        })
      }
    }
  }

  handleMenuClick(event){
    const key = event.target.id;
    this.setState({
      selected : key
    })
    this.init(this.state.algorithmList[key].id);
  }


  home(){
    this.props.home();
  }

  init(id){
     
  }

  resetAlgorithm(){
    this.setState({
      algorithmImp : undefined
    })
  }

  setupAlgorithm(){

  }

  _createAlgorithmMenu(){
    const algorithms = this.state.algorithmList;
    const selected   = parseInt(this.state.selected);

    return algorithms.map((item, key)=>
      <button className={key===selected?'menu-selected':'menu'} 
        key={key} 
        id={key}
        onClick={this.handleMenuClick}>
      {item.name}</button>
    );
  }
  renderAlgorithmHelper(){

  }

  render(){
    return (
      <div className='book'>
        <div className='slider'>
          <button onClick={this.home}>主页面</button>
          <b>{this.bookName}</b>
          {this._createAlgorithmMenu()}
        </div>
        {this.renderAlgorithmHelper()}
      </div>
    );
  }
}

export default BookLoader;